<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;

	}

	page {
		background-color: #fff;
	}
// <!-- 头部搜索 -->
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2rpx solid #eee;

		// column-gap: 2rpx;
		.i-back {
			width: 53rpx;
			height: 40rpx;
			background-image: url('/static/i-left.png');
			background-repeat: no-repeat;
			background-size: 70% 100%;
			margin: 0rpx 6rpx;
			margin-left: 24rpx;
		}

		.inp {
			width: calc(100% - 123rpx);
			height: 50rpx;
			line-height: 50rpx;
			padding: 8rpx 20rpx;
			font-size: 26rpx;
			border-radius: 10rpx;
		}

		.search-btn {
			width: 70rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin: 0rpx 14rpx;
			color: #666;
			font-size: 28rpx;
			text-align: center;
		}
	}
// <!-- 历史搜索 -->
	.search-history {
		margin-top: 10rpx;
		padding: 20rpx;
		border-bottom: 2rpx solid #eee;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				justify-content: left;
				align-items: center;

				.search-icon {
					width: 30rpx;
					height: 30rpx;
					background-image: url('/static/i-search.png');
					background-size: 100% 100%;
					margin: 4rpx 4rpx 0rpx 0rpx;
				}

				text {
					color: #999;
					font-size: 25rpx;
				}
			}

			.right-delete {
				width: 30rpx;
				height: 30rpx;
				background-image: url('/static/i-delete.png');
				background-size: 100% 100%;
				margin-right: 20rpx;
			}
		}

		.search-history-lists {
			.search-list {
				display: flex;
				// justify-content: space-between;
				flex-direction: wrap;
				flex-wrap: wrap;
				gap: 0rpx;

				.list-item {
					padding: 0rpx 22rpx;
					height: 50rpx;
					line-height: 50rpx;
					margin: 25rpx 0rpx 0rpx 20rpx;
					border: 2rpx solid #f5f5f5;
					border-radius: 10rpx;
					font-size: 25rpx;
					color: #666;
				}
			}

			.no-list {
				height: 60rpx;
				line-height: 60rpx;
				margin: 20rpx 0rpx 0rpx 35rpx;
				font-size: 25rpx;
				color: #999;
				// display: none;
			}
		}
	}
// <!-- 热门搜索 -->
	.hot-search {
		margin-top: 10rpx;
		padding: 20rpx;
		.title{
			display: flex;
			justify-content: left;
			align-items: center;
			.search-icon {
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				background-image: url('/static/i-hot.png');
				background-size: 100% 100%;
				margin-right: 4rpx;
			}
			text {
				color: #999;
				font-size: 25rpx;
			}
		}
		.hot-search-lists {
			.search-list {
				display: flex;
				// justify-content: space-between;
				flex-direction: wrap;
				flex-wrap: wrap;
				gap: 0rpx;
		
				.list-item {
					padding: 0rpx 22rpx;
					height: 50rpx;
					line-height: 50rpx;
					margin: 25rpx 0rpx 0rpx 20rpx;
					border: 2rpx solid #f5f5f5;
					border-radius: 10rpx;
					font-size: 25rpx;
					color: #666;
				}
			}
		}
		
	}
</style>
<template>
	<!-- 头部搜索 -->
	<view class="header">
		<view class="i-back" @click="backTo">

		</view>
		<input 
		    v-model="searchText" 
			class="inp" 
		    type="text" 
		    placeholder="学院风jk套装" 
		    placeholder-style="font-size:26rpx; color:#A4A4A4"
		    :style="{border:borderStyle}" 
		    @focus="handleFocus" 
		    @blur="handleBlur" 
		    :focus="isAutoFocus"
		    @confirm="handleSearch"    
		 />
		<view class="search-btn" @click="handleSearch">
			搜索
		</view>
	</view>
	<!-- 历史搜索 -->
	<view class="search-history">
		<view class="title">
			<view class="left">
				<view class="search-icon"></view>
				<text>历史搜索</text>
			</view>
			<view class="right-delete" @click="clearHistory"></view>
		</view>
		<view class="search-history-lists">
			<view v-if="historySearchArr.length > 0" class="search-list">
				<view class="list-item" v-for="(item,index) in historySearchArr" :key="index">
					{{item}}
				</view>
			</view>
			<view v-else class="no-list">
				暂无历史搜索
			</view>
		</view>
	</view>
	<!-- 热门搜索 -->
	<view class="hot-search">
		<view class="title">
			<view class="search-icon">
			
			</view>
			<text>热门搜索</text>
		</view>
		<view class="hot-search-lists">
			<view  class="search-list">
				<view class="list-item" :style="{color:item.color}" v-for="(item,index) in hotSearchArr" :key="index">
					{{item.query}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue'
	
	//热门搜索数组
	const hotSearchArr = ref([]) 
	
	//输入框内容
	const searchText = ref('')
	console.log("搜索的内容：",searchText);
	
	//搜索历史数组
	const historySearchArr = ref([])
	
	// 创建 ref 用于获取输入框 DOM 元素
	const isAutoFocus = ref(false);
	
	//定义初始边框
	const borderStyle = ref('2rpx solid #aaa')
	
	//边框切换逻辑
	//获取焦点时
	const handleFocus = () => {
		borderStyle.value = '2rpx solid #FF5777'
	}
	
	//失去焦点时
	const handleBlur = () => {
		borderStyle.value = '2rpx solid #aaa'
	}

	const backTo = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	//处理搜索逻辑
	const handleSearch = () => {
		//检查搜索内容是否为空或全为空格
		if(!searchText.value.trim()) return
		//添加到历史记录（实现去重和最近记录在前）
		const index = historySearchArr.value.indexOf(searchText.value)//查找当前搜索词在历史记录中的位置
		if(index !== -1) historySearchArr.value.splice(index ,1)//如果已存在，先移除旧位置(避免重复)
		historySearchArr.value.unshift(searchText.value)
		//保存到本地存储
		uni.setStorageSync('searchHistory', historySearchArr.value)
		
		
		uni.navigateTo({
			url:`/pages/searchResult/searchResult?q=${searchText.value}&isSearch=true`
		})
		console.log("11：",searchText.value);
		//清空输入框
		searchText.value = ''
	}
	
	//删除历史记录
	const clearHistory = () => {
		historySearchArr.value = []
		uni.removeStorageSync('searchHistory')
	}
	
	//热门搜索接口
	const hotSearch = async() => {
		await uni.request({
			url:'https://apis.netstart.cn/mogujie/hotSearch.json',
			method:'GET',
			success:(res) => {
				// console.log("热门搜索列表:",res);
				hotSearchArr.value = res.data.data.hotWord.data
				// console.log("热门搜索获取的数组：", hotSearchArr.value);
			},
			fail:(err) => {
				console.log(err);
			}
		})
	}
	
	
	// 页面挂载后让输入框获取焦点
	onMounted(() => {
		// 确保 DOM 渲染完成后再执行
		isAutoFocus.value = true;
		//从本地存储加载记录
		const history = uni.getStorageSync('searchHistory')
		if(history) historySearchArr.value = history
		
		//获取热门搜索数据（从服务器）
		hotSearch()
	})
	
hotSearch()

</script>